<template>
  <div style="height: 400px; width: 100%;">
    <div id="panel"></div>
    <div style="position: absolute;top: 20px;height: 40px;left: 100px;z-index: 999; display: flex">
      <el-input v-model="searchText" placeholder="请输入搜索关键字" id="searchInputId" @input="changeData"
        class="searchInputIdDiv" />
    </div>
    <div id="map-container"></div>

  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
const props = defineProps({
  mapData: {
    type: Object,
    default: {}, // 默认值为 false
  },
})
const emit = defineEmits(['OKmap'])

let map = null;
const searchText = ref('')
const AMapObj = ref(null)
let auto = ref('')
let autoOptions = {
  input: 'searchInputId',
}
window._AMapSecurityConfig = {
  securityJsCode: "c97bf1853f4b53606d466ebe8a5fd4a1",
};
onMounted(() => {
  getMap()
  if (props.mapData) {
    setTimeout(() => {
      searchText.value = props.mapData.address
      changeData()
    }, 500);


  }
});
// 初始化地图
const getMap = () => {
  AMapLoader.load({
    key: "1dd9d81ad5f173ebc2fb4d4c377addce",
    version: "2.0",
    plugins:
      ['AMap.ToolBar',
        'AMap.Scale',
        'AMap.Geolocation',
        'AMap.PlaceSearch',
        'AMap.Geocoder',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.CircleEditor',
        'AMap.MouseTool',
        'AMap.AutoComplete',
        'AMap.PlaceSearch',
        'AMap.Driving'],
  })
    .then((AMap) => {
      AMapObj.value = AMap
      map = new AMap.Map("map-container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 12, // 初始化地图级别
        center: props.mapData.lon ? [props.mapData.lon, props.mapData.lat] : [116.397428, 39.90923], // 初始化地图中心点位置
        // mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
        resizeEnable: true
      });
      let toolbar = new AMap.ToolBar(); //创建工具条插件实例
      map.addControl(toolbar); //添加工具条插件到页面
      let scale = new AMap.Scale();
      map.addControl(scale);
      let Geo_location = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,        //显示定位按钮，默认：true
        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      map.addControl(Geo_location);
      if (props.mapData) {
        poiSearch(AMapObj.value)
      }

    })
    .catch((e) => {
      console.log(e);
    });
}
// 搜索
const poiSearch = (AMap) => {
  auto.value = new AMap.AutoComplete(autoOptions)
  const placeSearch = new AMap.PlaceSearch({
    map: map,
    city: '', // 减小搜索范围至某个城市
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    citylimit: false, // 是否强制限制在设置的城市内搜索
    autoFitView: true,
    // panel: "panel", // 结果列表将在此容器中进行展示。出不来时设置样式z-inde: 999
  })
  placeSearch.search(searchText.value, function (status, result) {
    // 查询成功时，result即对应匹配的POI信息
    if (result.poiList) {
      emit('OKmap', result.poiList.pois[0])
    }

  });
  auto.value.on("select", function (e) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name);
        console.log(e);
    emit('OKmap', e.poi)
  });
}

const changeData = (value) => {
  poiSearch(AMapObj.value)
}


onUnmounted(() => {
  map?.destroy();
});
</script>



<style scoped lang="scss">
.searchInputIdDiv {

  ::v-deep .el-input__inner {
    width: 300px !important;
  }
}

#map-container {
  width: 100%;
  height: 400px;

  ::v-deep .amap-geolocation {
    bottom: 100px !important;
  }
}

#panel {
  width: 300px !important;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>
